<template>
 <footer class="footer">
      <span class="todo-count">剩余<strong>{{leftCount}}</strong></span>
      <ul class="filters" @click="$emit('changeType',type)">
        <li>
          <a @click.prevent="type ='all'" :class="{selected:type === 'all'}" href="#/">全部</a>
        </li>
        <li>
          <a @click.prevent="type ='active'" :class="{selected:type === 'active'}" href="#/active">进行中</a>
        </li>
        <li>
          <a @click.prevent="type ='completed'" :class="{selected:type === 'active'}" href="#/completed">已完成</a>
        </li>
      </ul>
      <button @click="clear" v-show="isShow" class="clear-completed">清除已完成</button>
    </footer>
</template>

<script>
export default {
  name: 'VueDay3TodoFooter',
  props: {
  list: {
    type:Array,
    required:true
  }
  },

  data() {
    return {
      type: 'all'
     
      
    };
  },

  computed: {
   leftCount() {
    return this.list.length
   },
   isShow() {
    return this.list.some(item => item.isDone)

   }
   },
  methods: {
    clear() {
      this.$emit('clearDone')
    }
    
  },
};
</script>

<style lang="scss" scoped>

</style>